<template>
  <GwContent>
    <GwTitle>组件测试：树形选择器</GwTitle>
    <UiSection>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" style="width: 320px">
        <el-form-item label="管辖地区" prop="area">
          <GwTreepicker v-model="ruleForm.area" :props="treeProps" :data="treeData" />
        </el-form-item>
        <el-form-item label="选择的值">
          <el-input :value="ruleForm.area" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </UiSection>
  </GwContent>
</template>

<script>
export default {
  name: 'DemoComponentTreepicker',
  data() {
    return {
      ruleForm: {
        area: ''
      },
      rules: {
        area: [
          { required: true, message: '请输入管辖地区', trigger: 'blur' }
        ]
      },
      treeData: [
        {
          id: 1,
          label: '一级 1',
          value: 'primary1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              value: 'secondary1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label',
        value: 'value' // 如果需要返回 value 这项需要配置
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
